<template>
  <div class="common-layout">
    <el-container class="box">
      <!-- 左侧菜单栏 -->
      <el-aside class="el-aside" :class="{ 'collapsed': isCollapsed }">
        <div class="logoBox">
          <h1 class="logo-text">山行者后台</h1>
          <div class="toggle-btn" @click="toggleCollapse">
            <el-icon :size="20">
              <Menu />
            </el-icon>
          </div>
        </div>
        <el-menu active-text-color="#409EFF" class="el-menu-vertical-demo" :default-active="activeTabName"
          text-color="#b8c7ce" :router="true" :collapse="isCollapsed" unique-opened background-color="transparent">
          <template v-for="item in asideMenu" :key="item.title">
            <template v-if="item.subs">
              <el-sub-menu :index="item.index" popper-class="custom-submenu">
                <template #title>
                  <div class="menu-item-content">
                    <el-icon :size="18" :color="isCollapsed ? '#b8c7ce' : ''">
                      <component :is="item.icon" />
                    </el-icon>
                    <span class="menu-title">{{ item.title }}</span> <!-- 移除 v-show -->
                  </div>
                </template>
                <el-menu-item v-for="subItem in item.subs" :key="subItem.index" :index="subItem.index"
                  @click="handleMenuItem(subItem)" class="submenu-item">
                  <div class="menu-item-content">
                    <el-icon :size="16" :color="isCollapsed ? '#b8c7ce' : ''">
                      <component :is="subItem.icon" />
                    </el-icon>
                    <span class="menu-title">{{ subItem.title }}</span> <!-- 移除 v-show -->
                  </div>
                </el-menu-item>
              </el-sub-menu>
            </template>
            <template v-else>
              <el-menu-item :index="item.index" @click="handleMenuItem(item)" class="menu-item">
                <div class="menu-item-content">
                  <el-icon :size="18" :color="isCollapsed ? '#b8c7ce' : ''">
                    <component :is="item.icon" />
                  </el-icon>
                  <span class="menu-title">{{ item.title }}</span> <!-- 移除 v-show -->
                </div>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- header头部菜单 -->
        <el-header class="header">
          <el-menu class="header-menu" mode="horizontal" background-color="transparent" text-color="#333"
            active-text-color="#1890ff">
            <el-menu-item index="1">
              <el-icon>
                <User />
              </el-icon>
              <span>{{ currentUser?.name || currentUser?.username }}</span>
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Management />
                </el-icon>
                <span>我的工作台</span>
              </template>
              <el-menu-item index="2-1" @click="exitLogin">
                <el-icon>
                  <SwitchButton />
                </el-icon>
                <span>退出登录</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-header>

        <!-- 主体模块 - 美化版 -->
        <el-main class="el-main">
          <div class="main-content-wrapper">
            <!-- 动态背景层 -->
            <div class="dynamic-bg-layer">
              <div class="bg-shape shape-1"></div>
              <div class="bg-shape shape-2"></div>
              <div class="bg-shape shape-3"></div>
            </div>

            <!-- 内容区域 -->
            <div class="content-area">
              <!-- 页面标题区域 -->
              <div class="content-title" v-if="showTitle">
                <el-icon :is="getTabIcon(activeTabName)" />
                <span>{{ getTabTitle(activeTabName) }}</span>
              </div>

              <!-- 内容卡片区域 -->
              <div class="content-card">
                <div class="scrollable-content">
                  <router-view></router-view>
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
// 添加 onMounted 导入
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios'; // 确保已安装axios
import {
  Document, Location, Setting, User, List, Operation, TrendCharts, Management, Bell, SwitchButton, DataBoard,
  DataAnalysis, Calendar, Connection, OfficeBuilding, Check, Edit, ChatDotRound, ChatLineSquare, House, Picture,
  Collection, Star, Menu, Top, Notebook, Pointer
} from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import UserIdentityManager from '@/utils/UserIdentityManager';

const router = useRouter();
const isCollapsed = ref(false);
const activeTabName = ref('/main');
const currentUser = ref(null); // 修改为currentUser对象，存储完整的用户信息
const currentRole = ref('');

const asideMenu = ref([
  {
    title: '数据分析', index: '/data', icon: DataAnalysis, subs: [
      { title: '数据分析看板', index: '/main', icon: DataAnalysis },
      { title: '金额统计', index: '/money', icon: Document }
    ]
  },
  {
    title: '用户管理', index: '/user', icon: User, subs: [
      { title: '用户列表', index: '/user/list', icon: User },
      { title: '关注列表', index: '/user/follows', icon: Connection }
    ]
  },
  {
    title: '信息管理', index: '/info', icon: Setting, subs: [
      { title: '酒店信息列表', index: '/hotel/list', icon: List },
      { title: '旅行社信息列表', index: '/agency/list', icon: OfficeBuilding },
      { title: '景点信息列表', index: '/scenic/list', icon: List },
      { title: '跟团游审核列表', index: '/travel/list', icon: List },
      { title: '跟团游活动列表', index: '/travel/active', icon: Check },
      { title: '攻略列表', index: '/user/strategies', icon: Notebook }
    ]
  },
  {
    title: '评论管理', index: '/comment', icon: ChatDotRound, subs: [
      { title: '景点评论', index: '/comment/scenic', icon: ChatLineSquare },
      { title: '攻略评论', index: '/comment/strategy', icon: ChatLineSquare }
    ]
  },
  {
    title: '收藏管理', index: '/collect', icon: Star, subs: [
      { title: '酒店收藏', index: '/collect/hotel', icon: House },
      { title: '景点收藏', index: '/collect/scenic', icon: Picture },
      { title: '攻略收藏', index: '/collect/strategy', icon: Collection },
      { title: '跟团游收藏', index: '/collect/travel', icon: Location }
    ]
  },
  {
    title: '点赞管理', index: '/like', icon: Pointer, subs: [
      { title: '景点点赞', index: '/like/scenic', icon: Picture },
      { title: '攻略点赞', index: '/like/strategy', icon: Notebook }
    ]
  },
  {
    title: '登录日志', index: '/system/logs', icon: Notebook
  }
]);

// 获取当前路由的标题
const getTabTitle = (index) => {
  // 特殊处理酒店列表页面，不显示标题
  if (
    index === '/main' ||
    index === '/money' ||
    index === '/user/follows' ||
    index === '/user/list' ||
    index === '/hotel/list' ||
    index === '/agency/list' ||
    index === '/scenic/list' ||
    index === '/travel/list' ||
    index === '/travel/active' ||
    index === '/user/strategies' ||
    index === '/comment/scenic' ||
    index === '/comment/strategy' ||
    index === '/collect/hotel' ||
    index === '/collect/scenic' ||
    index === '/collect/strategy' ||
    index === '/collect/travel' ||
    index === '/like/scenic' ||
    index === '/like/strategy') {
    return ''; // 返回空字符串就不会显示标题
  }

  // 其他路由正常显示标题
  const item = asideMenu.value.flatMap(item => item.subs ? [item, ...item.subs] : [item])
    .find(item => item.index === index);
  return item ? item.title : '未知页面';
};

// 获取当前路由的图标
const getTabIcon = (index) => {
  const item = asideMenu.value.flatMap(item => item.subs ? [item, ...item.subs] : [item])
    .find(item => item.index === index);
  return item ? item.icon : Document;
};

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

const handleMenuItem = (obj) => {
  activeTabName.value = obj.index;
  router.push(obj.index);
};
// 获取当前用户信息
const fetchCurrentUser = () => {
  currentRole.value = UserIdentityManager.getCurrentRole();
  // 获取"当前角色"下的用户信息（自动多角色隔离，防串号）
  const user = UserIdentityManager.getCurrentUserIdentity();
  currentUser.value = user ? { ...user } : null;
};


// 退出登录
const exitLogin = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    UserIdentityManager.logout(); // 登出本tab的当前角色
    currentUser.value = null;
    router.push('/loginpage');
  }).catch(() => { });
};

// 组件挂载时获取用户信息
onMounted(() => {
  fetchCurrentUser();
});
</script>

<style scoped>
/* 全局布局样式 */
.common-layout {
  display: flex;
  height: 100vh;
  background-color: #f5f7fa;
}

.box {
  height: 100%;
  display: flex;
}

/* 主内容区样式 */
.el-main {
  padding: 0;
  overflow: hidden;
  position: relative;
  background-color: transparent;
}

/* 主内容包装器 */
.main-content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 动态背景层 */
.dynamic-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

/* 背景形状 */
.bg-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.3;
  animation: float 20s infinite ease-in-out;
}

.shape-1 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #409EFF 0%, #34c3ff 100%);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

.shape-2 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
  bottom: -50px;
  right: -50px;
  animation-delay: 5s;
}

.shape-3 {
  width: 250px;
  height: 250px;
  background: linear-gradient(135deg, #e6a23c 0%, #f5d07a 100%);
  top: 50%;
  left: 30%;
  animation-delay: 10s;
}

@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  33% {
    transform: translate(20px, -20px) rotate(120deg);
  }

  66% {
    transform: translate(-15px, 15px) rotate(240deg);
  }

  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

/* 内容区域 */
.content-area {
  position: relative;
  z-index: 10;
  height: 100%;
  padding: 20px;
}

/* 页面标题区域 */
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-icon {
  font-size: 24px;
  color: #409EFF;
  margin-right: 12px;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

/* 内容卡片 */
.content-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 24px;
  height: calc(100% - 80px);
  overflow-y: auto;
}

/* 滚动内容区域 */
.scrollable-content {
  height: 100%;
  overflow-y: auto;
}

/* 自定义滚动条 */
.scrollable-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.scrollable-content::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-header {
    margin-bottom: 16px;
  }

  .header-title {
    font-size: 18px;
  }

  .content-card {
    padding: 16px;
  }
}

/* 全局布局样式 */
.common-layout {
  display: flex;
  height: 100vh;
  background-color: #f5f7fa;
}

.el-aside {
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  color: white;
  transition: all 0.3s ease;
  width: 220px;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
  border-radius: 0 12px 12px 0;
  position: relative;
  z-index: 10;
}

.el-aside.collapsed {
  width: 80px;
}

/* Logo区域样式 */
.logoBox {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.collapsed .logo-text {
  opacity: 0;
  width: 0;
}

.toggle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 菜单样式 */
.el-menu-vertical-demo {
  background: transparent;
  border: none;
  margin-top: 10px;
}

.el-menu-item {
  transition: all 0.3s ease;
  padding: 12px 20px !important;
  color: #b8c7ce !important;
  font-size: 14px;
  border-radius: 8px !important;
  margin: 4px 8px;
  display: flex;
  align-items: center;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.el-menu-item.active {
  background-color: rgba(64, 158, 255, 0.2) !important;
  color: #409EFF !important;
}

.el-sub-menu .el-menu-item {
  padding-left: 30px !important;
}

.el-menu-item i {
  margin-right: 10px;
  transition: all 0.3s ease;
}

.el-menu-vertical-demo .el-sub-menu__title {
  font-size: 16px;
  font-weight: 500;
  color: #b8c7ce !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  margin: 4px 8px;
  transition: all 0.3s ease;
}

.el-sub-menu__title:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.el-sub-menu {
  background-color: transparent;
  border-radius: 8px;
  margin: 5px 0;
}

.el-menu-vertical-demo .el-sub-menu__popper {
  border-radius: 8px;
  background-color: #2c3e50 !important;
  margin: 4px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 自定义子菜单样式 */
.custom-submenu {
  padding: 0 !important;
  margin: 0 !important;
}

/* 确保弹出层文字始终显示 */
.custom-submenu .el-menu-item {
  padding-left: 30px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.custom-submenu .el-menu-item .menu-title {
  display: inline-block !important;
  /* 强制显示文字 */
  opacity: 1 !important;
  /* 强制不透明 */
}

.submenu-item {
  padding-left: 30px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.submenu-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 菜单项内容容器 */
.menu-item-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.menu-title {
  margin-left: 8px;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.collapsed .menu-title {
  opacity: 0;
  width: 0;
}

/* 切换按钮样式 */
.el-aside .toggle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.el-aside .toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 主体内容区域样式保持不变 */
.el-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-menu {
  border-bottom: none;
}

.el-main {
  padding: 0;
  overflow-x: hidden;
}

.scrollable-content {
  height: 100%;
  overflow-y: auto;
}

.el-main-content {
  padding: 20px;
}

.content-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.content-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  transition: all 0.3s ease;
  /* 添加过渡效果 */
}

/* 当标题为空时隐藏整个元素 */
.content-title:empty {
  display: none !important;
  margin-bottom: 0 !important;
}

.router-view-container {
  min-height: calc(100% - 60px);
}
</style>